<template>
	<view class="content poRel">
		<view class="wid100 bacFFF" style="height: 96rpx;">
			<view class="wid90 hei100 mar dis disJuB">
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;" @click="xuanClick(0)"
					:style="xuan == 0?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'">
					全部</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;" @click="xuanClick(1)"
					:style="xuan == 1?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'">
					待支付</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;" @click="xuanClick(2)"
					:style="xuan == 2?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'">
					待服务</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;" @click="xuanClick(3)"
					:style="xuan == 3?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'">
					服务中</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;" @click="xuanClick(4)"
					:style="xuan == 4?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'">
					已完成</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;" @click="xuanClick(5)"
					:style="xuan == 5?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'">
					已取消</view>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 96rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<wsj v-if="list.length == 0" zs='0'></wsj>
			<block v-for="(item,index) in list" :key="index">
				<view class="mar-top20 wid90 mar bacFFF borRad20"
					@click="tiaozhuan('/pages/indent/particulars?id='+item.id+'&tech_id='+item.tech_id+'&pd=1')">
					<view class="wid90 mar">
						<view class="hei80 dis disAl disJuB">
							<view class="foSi20" style="color: #5B5B5B;">订单号：{{item.order_id}}</view>
							<view class="foSi25 fowe800">
								<span v-if="item.pay_status == 0 && item.service_status != -2"
									:style="'color: '+theme.main_color+';'">待支付</span>
								<span v-if="item.service_status >= 0 && item.pay_status == 1 && item.service_status <=3"
									style="color: #FF0000;">待服务</span>
								<span
									v-if="item.service_status == 4 && item.service_status <= 4 && item.pay_status != 0"
									style="color: #FF0000;">服务中</span>
								<span v-if="item.service_status >= 5 && item.pay_status != 0"
									:style="'color: '+theme.main_color+';'">已完成</span>
								<span v-if="item.service_status == -2">已取消</span>
							</view>
						</view>
						<view class="xia"></view>
						<view class="dis disAl wid100 mar-top30">
							<view class="wid25" style="height: 142rpx;">
								<image :src="item.service.cover_img" class="hei100 borRad10" style="width: 142rpx;">
								</image>
							</view>
							<view style="width: 75%;">
								<view class="dis disAl disJuB">
									<view class="foSi30 fowe800" style="line-height: 40rpx;">{{item.service.name}}
									</view>
									<view class="foSi25">×{{item.service_num}}</view>
								</view>
								<view class="foSi20" style="color: #878787;">
									<view class=" mar-top10">服务技师：{{item.technician.name}}</view>
									<view class=" mar-top10">预约时间：{{item.start_time}}</view>
									<view class=" mar-top10">
										<span>总计：</span>
										<span class="foSi25" style="color: #FF0000;">¥{{item.total_price}}</span>
									</view>
								</view>
							</view>
						</view>
						<view class="mar-top20 dis foSi20 wid100" style="justify-content: flex-end;">
							<view class="dis disAl disJuC mar-right20 butt1"
								v-if="item.pay_status == 0 && item.service_status != -2" @click.stop="quxiao(item)">取消订单
							</view>
							<view class="dis disAl disJuC coFFF butt2":style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'"
								v-if="item.pay_status == 0 && item.service_status != -2" @click.stop="zhifu(item)">去支付
							</view>
							<view class="dis disAl disJuC mar-right20 butt1"
								v-if="item.service_status >= 5 && item.pay_status != 0"
								@click.stop="tiaozhuan('/pages/technician/evaluate?tech_id='+item.tech_id+'&order_id='+item.id)">去评价</view>
							<view class="dis disAl disJuC coFFF butt2 mar-right20":style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'"
								v-if="item.service_status >= 5 && item.pay_status != 0"
								@click.stop="tiaozhuan1('/pages/technician/technician')">再来一单</view>
							<view class="dis disAl disJuC coFFF butt2 mar-right20":style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'"
								v-if="item.service_status == 4 && item.pay_status <= 4 && item.pay_status != 0"
								@click.stop="tiaozhuan('/pages/indent/upgrade?id='+item.id+'tech_id&='+item.tech_id+'&service_id='+item.service_id)">升级/加钟</view>
							<!--  -->
							<view class="dis disAl disJuC butt1"
								v-if="item.pay_status == 1 && (item.pay_refund_status == 0 || item.pay_refund_status == 3)" @click.stop="tuikuan(item)">
								申请退款</view>
							<view class="dis disAl disJuC butt1"
								v-if="item.pay_status == 1 && item.pay_refund_status == 1">
								退款申请中</view>
								
							<view class="dis disAl disJuC butt1 mar-left20" 
								v-if="item.pay_status == 1 && item.pay_refund_status == 3"
								@click.stop="check_no(item)">退款失败</view>
						</view>
						<view style="height: 30rpx;"></view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		data() {
			return {
				url: this.global.url,
				xuan: 0,
				last_page: 0,
				page: 1,
				list: [],
				theme: null
			}
		},
		onLoad(option) {
			this.theme = uni.getStorageSync('theme')
			this.xuan = Number(option.xuan)
			let that = this
			uni.$on('order_out', function(data) {
				that.list = []
				that.page = 1
				that.getList()
			})
			this.getList()

		},
		methods: {
			check_no(item){
				uni.showModal({
					title: '提示',
					confirmText: '确认', //确定按钮的文字，默认为"确定"
					
					content: item.pay_refund_msg+',如有疑问请联系平台客服进行咨询',
					showCancel: false, //是否显示取消按钮，默认为 true
					
					success: function(res) {
						if (res.confirm) {
						}
					}
				});
			},
			tuikuan(item) {
				var that = this;
				// 退款申请
				uni.navigateTo({
					url: '/pages/indent/pay_reund?id=' + item.id
				})

				return false;
				uni.request({
					url: that.global.url + '/api/qianyu_smfw/order/status_order',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: item.id,
						status: 3
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.showToast({
								title: '退款成功，请稍等',
								icon: 'none',
								duration: 2000
							})
							that.page = 1
							that.getList()
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})

			},
			quxiao(item) {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_smfw/order/status_order',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: item.id,
						status: 1
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.showToast({
								title: '取消订单成功',
								icon: 'none',
								duration: 2000
							})
							that.page = 1
							that.getList()
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})

			},
			zhifu(item) {
				let that = this
				uni.showLoading({
					title: '支付中...'
				})
				uni.request({
					url: that.global.url + '/api/qianyu_smfw/order/status_order',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						id: item.id,
						status: 2
					},
					success: (res) => {
						let result = res.data
						console.log(result)
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: result.data.appId, // 必填，公众号的唯一标识
							timestamp: result.data.timeStamp, // 必填，生成签名的时间戳
							nonceStr: result.data.nonceStr, // 必填，生成签名的随机串
							signature: result.data.paySign, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						})
						jweixin.ready(function() {
							jweixin.chooseWXPay({
								appId: result.data.appId,
								package: result.data.package, //
								timestamp: result.data.timeStamp, // 时间戳
								nonceStr: result.data.nonceStr, // 随机数
								signType: result.data.signType,
								paySign: result.data.paySign, // 签名
								success: function() {
									// 支付成功
									uni.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												that.page = 1
												that.getList()
											}
										}
									})
								},
								cancel: function() {
									// 支付失败
									console.log(res)
									uni.showToast({
										title: '取消支付',
										icon: 'none',
										duration: 2000
									})
								},
								fail: function() {
									// 支付失败
									console.log(res)
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									})
								}
							})
						})
					},
					complete() {
						uni.hideLoading()
					}
				});
			},

			xuanClick(index) {
				if (this.xuan != index) {
					this.xuan = index
					this.page = 1
					this.getList()
				}
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/order/order_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						status: that.xuan,
						page: that.page
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.last_page = result.data.last_page
							if (that.page == 1) {
								that.list = result.data.data
							} else {
								that.list = that.list.concat(result.data.data)
							}
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})

			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			},
			tiaozhuan1(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}

	.xia {
		height: 1rpx;
		background-color: #E5E5E5;
	}

	.butt1 {
		width: 120rpx;
		height: 42rpx;
		color: #8A8A8A;
		border: 1rpx solid #8A8A8A;
		border-radius: 8rpx;
	}

	.butt2 {
		width: 120rpx;
		height: 42rpx;
		border-radius: 8rpx;
	}
</style>